
<script setup>
import { ref, reactive } from 'vue';
import { useAclStore } from '@/stores/aclStore.js';

const aclStore = useAclStore();
const dialogVisible = ref(false);

const acl = reactive({
  name: '',
  code: '',
  description: '',
  type: null,
  url: '',
  parentId: null
});

const aclForm = ref(null);
const submitForm = () => {
  // 修正：使用正确的表单引用和验证方法
  aclForm.value?.validate((valid) => {
    if (valid) {
      console.log("校验通过", acl);
      console.log("acl", acl);

      // 修正：调用store方法添加权限
      aclStore.addAcl({ ...acl }).then(() => {
        // 添加成功后再关闭对话框
        close();
      });
    } else {
      console.log("校验失败");
    }
  });
};

const show = () => {
  // 重置表单数据
  Object.assign(acl, {
    name: '',
    code: '',
    description: '',
    type: null,
    url: '',
    parentId: null
  });

  // 重置表单验证状态
  aclForm.value?.resetFields();
  dialogVisible.value = true;
};

const close = () => {
  dialogVisible.value = false;
};

// 对外暴露show方法
defineExpose({
  show
});
</script>

<template>
  <el-dialog
      title="添加权限"
      v-model="dialogVisible"
      width="50%"
  >
    <!-- 修正：添加ref属性 -->
    <el-form ref="aclForm" :model="acl" label-width="100px">
      <el-form-item label="权限名称" prop="name" :rules="[{ required: true, message: '请输入权限名称', trigger: 'blur' }]">
        <el-input v-model="acl.name" />
      </el-form-item>
      <el-form-item label="权限代码" prop="code" :rules="[{ required: true, message: '请输入权限代码', trigger: 'blur' }]">
        <el-input v-model="acl.code" />
      </el-form-item>
      <el-form-item label="类型" prop="type" :rules="[{ required: true, message: '请选择类型', trigger: 'change' }]">
        <el-select v-model="acl.type" placeholder="请选择类型">
          <el-option label="接口" :value="1"></el-option>
          <el-option label="菜单" :value="2"></el-option>
          <el-option label="按钮" :value="3"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="资源路径">
        <el-input v-model="acl.url" />
      </el-form-item>
      <el-form-item label="权限描述">
        <el-input v-model="acl.description" type="textarea" />
      </el-form-item>
    </el-form>

    <template #footer>
      <el-button @click="close">取消</el-button>
      <el-button type="primary" @click="submitForm">确定</el-button>
    </template>
  </el-dialog>
</template>
